<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>vue2生命周期</h2>
      <p>{{ count }}</p>
    </div>

    <script src="./lib/vue2.js"></script>
    <script>
      // 如果没有出现在html里面的变量，尽可能地不要放在data里面
      let timer;

      // vue2的beforeMount里面页面的内容是编译以前的模板（包含了指令和双大括号的）
      // vue3的beforeMount里面是没有页面内容
      new Vue({
        data() {
          return {
            count: 10,
            // timer: null,
          };
        },
        beforeCreate() {},
        created() {},
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app"));
        },
        mounted() {
          console.log("mounted", document.querySelector("#app"));
          timer = setInterval(() => {
            console.log(123);
          }, 1000);
          setTimeout(() => {
            // this.$destroy()用来主动销毁页面的
            this.$destroy();
          }, 3000);
        },
        beforeUpdate() {},
        updated() {},
        // 卸载阶段的生命周期的名字不一样
        beforeDestroy() {
          // 关闭定时器，WebSocket长连接，js的事件监听，图表和地图等第三方插件
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
